﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello WeiTap.Logger!</title>
    <!-- ZUI 标准版压缩后的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/zui/1.8.1/css/zui.min.css">
    <link href="https://cdn.bootcss.com/zui/1.8.1/lib/datetimepicker/datetimepicker.min.css" rel="stylesheet">
    
    <style>
        .example {
            position: relative;
            padding: 20px;
            margin: 0 0 15px;
            border: 1px solid #ddd;
            border-style: solid;
            outline: 0;
            -webkit-transition: all .3s;
            -o-transition: all .3s;
            transition: all .3s;
        }

        .long-text {
            word-break: break-all; /*支持IE，chrome，FF不支持*/
            word-wrap: break-word; /*支持IE，chrome，FF*/
        }
    </style>
</head>
<body>
    <div class="example">
        <form class="form-inline">
            <div class="form-group">
                <input type="text" id="timefrom" name="timefrom" class="form-control form-datetime" placeholder="选择一个日期+时间"  readonly="readonly">
                <input type="text" id="timeto" name="timeto" class="form-control form-datetime" placeholder="选择一个日期+时间" readonly="readonly">
                
                
            </div>
            <button type="button" class="btn btn-primary" onclick="search()">搜索</button>
        </form>
    </div>
    <table id="logs" class="table table-condensed long-text " style="display: none;">
        <colgroup>
            <col style="width: 150px" />
            <col style="width: 100px" />
            <col />
        </colgroup>
        <thead>
            <tr>
                <th> 时间 </th>
                <th> 等级 </th>
                <th> 摘要 </th>
            </tr>
        </thead>
        <tbody>
            <tr class="{color}" style="cursor: pointer" onclick="detail('{index}')">
                <td>{Time}</td>
                <td>{LogLevel}</td>
                <td>{Summary}</td>
            </tr>
        </tbody>
    </table>
    <div id="logdetail" style="display: none">
        <ul class="list-group" style="margin: 0">
            <li class="list-group-item  long-text " href="#">
                <span class="text-success">[{time}]</span>
                <span class="text-{color}">{level}</span>
                【{category}】
                {message}
                {button1}
                {button2}
                {button3}
                <div class="callstack collapse" data-parent="#logdetail">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            调用堆栈
                        </h4>
                    </div>
                    <div class="with-padding long-text bg-default">
                        {callstack}
                    </div>
                </div>
                <div class="text collapse" data-parent="#logdetail">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            详细内容
                        </h4>
                    </div>
                    <div class="with-padding long-text bg-default">
                        {text}
                    </div>
                </div>
                <div class="format collapse" data-parent="#logdetail">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            格式化
                        </h4>
                    </div>
                    <div class="with-padding long-text bg-default">
                    </div>
                </div>
            </li>
        </ul>
    </div>
<button class="btn btn-block " type="button" onclick="loadMore()">加载更多</button>
<input type="hidden" id="offset" value="0" />
    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="https://cdn.bootcss.com/zui/1.8.1/lib/jquery/jquery.js"></script>
    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/zui/1.8.1/js/zui.min.js"></script>
<!--//cdn.bootcss.com/zui/版本号/dist目录下的文件路径及名称-->
    <script src="https://cdn.bootcss.com/zui/1.8.1/lib/datetimepicker/datetimepicker.min.js"></script>
    <script src="tools.js?v2"></script>
    <!--本地文件处理-->
<script>
    $(".form-datetime").datetimepicker(
        {
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1,
            format: "yyyy-mm-dd hh:ii"
        });
    
</script>
    <!--日志格式处理-->
    <script>
        function ParseLogs(text) {
            var lines = $.parseJSON(text);
            var list = [];
            for (var i = 0, j = lines.length-1;i < lines.length;i++, j--) {
                var line = lines[i];
                if (line == null || $.trim(line).length === 0) {
                    continue;
                }
                var arr = line.split(",");
                var log = {
                    Time: arr[0],
                    UID: arr[1],
                    LogLevel: ['', '异常', '警告', '提示', '调试'][parseInt(arr[2])],
                    Module: arr[3],
                    index: j,
                    Details: ParseDetails(arr[4])
                };
                log.Summary = GetSummary(log);
                var search = $.trim($("#searchKey").val());
                if (search.length > 0) {
                    var regexp = new RegExp("(" + search + ")", "gmi");
                    var l = log.Summary.length;
                    log.Summary = log.Summary.replace(regexp, "<b class='bg-warning'>$1</b>");
                    if (l === log.Summary.length) {
                        continue;
                    }
                }
                list.push(log);
            }
            list.sort(function (a, b) { return Date.parse(b.Time) - Date.parse(a.Time); });
            return list;
        }

        function GetSummary(log) {
            var search = $.trim($("#searchKey").val());
            var lines = [];
            for (var i = 0; i < log.Details.length; i++) {
                var d = log.Details[i];
                if ((/^[*].+[*]$/g).test(d.category)) {
                    lines.push(d.message);
                } else if (search.length > 0) {
                    var regexp = new RegExp(search, "gi");
                    if (regexp.test(d.category)) {
                        lines.push(d.category);
                    } else if (regexp.test(d.message)) {
                        lines.push(d.message);
                    } else if (regexp.test(d.category)) {
                        lines.push(d.callstack);
                    } else if (regexp.test(d.text)) {
                        lines.push(d.text);
                    }
                }
            }
            if (lines.length === 0) {
                return "无摘要";
            }
            return lines.join("<br />");
        }

        function ParseDetails(text) {
            text = decodeURIComponent(text);
            var lines = text.split(/[\n\r]+/g);
            var list = [];
            for (var i = 0; i < lines.length; i++) {
                var line = lines[i];
                if (line == null || $.trim(line).length === 0) {
                    continue;
                }
                var arr = line.split(",");
                var log = {
                    time: arr[0],
                    level: ['', '异常', '警告', '提示', '调试'][parseInt(arr[1])],
                    category: decodeURIComponent(arr[2]),
                    message: decodeURIComponent(arr[3]),
                    callstack: decodeURIComponent(arr[4]),
                    text: decodeURIComponent(arr[5])
                };
                list.push(log);
            }
            return list;
        }
    </script>
<script>
    var allData = [];
    var fromTimestamp = Math.round(new Date().getTime() / 1000) - 300;//5分钟
    var toTimestamp = Math.round(new Date().getTime() / 1000);
    $(function() {
        getlogs();
    })
    $blqw.data.loglist = new $.zui.ModalTrigger({
        size: "fullscreen",
        backdrop: false
    });

    function search() {
        $("#offset").val(0);
        getlogs();
    }

    function getlogs() {
        var offset =parseInt($("#offset").val());
        var from = $("#timefrom").val();
        if (from) {fromTimestamp = Math.round(new Date(from).getTime() / 1000);}
        var to = $("#timeto").val();
        if (to) {toTimestamp = Math.round(new Date(to).getTime() / 1000);}
        $.ajax({
            url: 'https://weadmin.711688.net.cn/log/getlogs?from='+fromTimestamp+'&to='+toTimestamp+'&lines=100&offset='+offset, success: function (msg) {
                console.log(offset);
                if (offset === 0)
                    {allData = ParseLogs(msg);}
                else {
                    var tempData = ParseLogs(msg);
                    allData=allData.concat(tempData);
                }
                
                $blqw.data.Logs = allData;
                $blqw.fillTable("#logs", allData, function (d, n, i) {
                    switch (n) {
                    case "Summary":
                        return d.Summary;
                    case "index":
                        return i;
                    case "color":
                        switch (d.LogLevel) {
                        case "异常":
                            return "danger";
                        case "警告":
                            return "warning";
                        case "提示":
                            return "active";
                        }
                        break;
                    default:
                    }
                });
                $("#logs").show();
            } });
    }

    function loadMore() {
        var offset = parseInt($("#offset").val());
        $("#offset").val(offset + 100);
        getlogs();
    }

    $("#logfile").change(function () {
        upload(this,
            function (text) {
                var data = ParseLogs(text);
                $blqw.data.Logs = data;
                $blqw.fillTable("#logs", data, function (d, n, i) {
                    switch (n) {
                    case "Summary":
                        return d.Summary;
                    case "index":
                        return i;
                    case "color":
                        switch (d.LogLevel) {
                        case "异常":
                            return "danger";
                        case "警告":
                            return "warning";
                        case "提示":
                            return "active";
                        }
                        break;
                    default:
                    }
                });
                $("#logs").show();
            });
    });

    function detail(index) {
        if (index < 0 || index >= $blqw.data.Logs.length) {
            new $.zui.Messager('没有了!', {
                type: 'info',
                placement: 'center', // 定义显示位置
                time: 1000,
            }).show();
            return;
        }

        var ele = $("#logdetail > *").clone();
        var search = $.trim($("#searchKey").val());
        var regexp = null;
        if (search.length > 0) {
            regexp = new RegExp("(" + search + ")", "gmi");
        }
        var highlight = function (text) {
            var html = $blqw.encodeHTML(text);
            return regexp == null ? html : html.replace(regexp, "<b class='bg-warning'>$1</b>");;
        };
        $blqw.fillList(ele, $blqw.data.Logs[index].Details, function (d, n) {
            switch (n) {
            case "color":
                switch (d.level) {
                case "异常":
                    return "danger";
                case "警告":
                    return "warning";
                case "提示":
                    return "special";
                case "调试":
                    return "primary";
                }
                break;
            case "category":
                if (d.category != null && d.category.length > 2 && d.category.slice(0, 1) === '*' && d.category.slice(-1) === '*') {
                    return "<strong>" + highlight(d.category.slice(1, -1)) + "</strong>";
                }
                return highlight(d.category);
            case "message":
                return highlight(d.message);
            case "button1":
                if (d.callstack != null && d.callstack !== "") {
                    return '<button onclick="$(this).nextAll(\'.callstack\').collapse({parent:$(this).parent()}).collapse(\'toggle\')">堆栈</button>';
                }
                break;
            case "button2":
                if (d.text != null && d.text !== "") {
                    return '<button onclick="$(this).nextAll(\'.text\').collapse({parent:$(this).parent()}).collapse(\'toggle\')">详情</button>';
                }
                break;
            case "button3":
                //1.decode
                var raw = $.trim(d.message);
                var msg = raw;
                try {
                    var decode = decodeURIComponent(msg);
                    if (decode !== msg) {
                        msg = decode;
                    }
                } catch (e) {

                }

                //2.json
                try {
                    if (msg && (msg.charAt(0) === '[' || msg.charAt(0) === '{')) {
                        var obj = $.parseJSON(msg.replace(/\</g, "&lt;").replace(/\>/g, "&gt;"));
                        msg = kk.jsonFormat(obj);
                    }

                } catch (e) {
                    console.debug(e);
                }

                //3.crlf
                if ((/[\n\r]/).test(msg)) {
                    msg = kk.encodeHTML(msg, true);
                }

                if (msg !== raw) {
                    return '<button data-format="' + encodeURIComponent(msg) + '" onclick="$(this).nextAll(\'.format\').collapse(\'toggle\').find(\':last\').html(decodeURIComponent($(this).data(\'format\')))">格式化</button>';
                }

                break;
            default:
            }
        });
        $blqw.data.loglist.show({
            title: "日志详情",
            custom: ele,
        });
    }

</script>
</body>
</html>